<template>
    <a-form layout='horizontal' class="departmentAddRoot">
        <a-form-item label="部门名称"
        >
            <a-input v-model="form.departmentName"></a-input>
        </a-form-item>

        <a-form-item label="部门描述"
        >
            <a-input v-model="form.departmentDesc"></a-input>
        </a-form-item>

        <a-form-item label="有无上级部门">
            <a-radio-group v-model="hasPid">
                <a-radio-button   :value="false">无</a-radio-button>
                <a-radio-button   :value="true">有</a-radio-button>
            </a-radio-group>
        </a-form-item>

        <a-form-item label="选择上级部门"
                     v-if="hasPid">
         <a-tree-select v-model="form.departmentPid" :treeData="departmentTreeData" placeholder="请选择上级部门" treeDefaultExpandAll></a-tree-select>
        </a-form-item>


    </a-form>
</template>

<script>
    import {Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,message} from 'ant-design-vue';

    export default {
        name: "DepartmentAdd",
        components: {
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect},
        props: ['value'],
        data() {
            return {
                avaType:[],
                form: {
                    departmentName: '',
                    departmentDesc: '',
                    departmentPid: '',
                },
                hasPid:false,
                departmentTreeData:[]
            };
        },
        mounted(){

            this.loadDepartments();

        },
        methods: {

            loadDepartments(){
                this.$axios.get("/auth/department/getDepartmentList")
                    .then(d=>{
                        if(d.data.status == 0){
                            let data = d.data.data;

                            this.departmentTreeData = this.buildTreeSelectData(data);
                        }

                    })
                    .catch(e=>{

                        console.log(e);
                    })
            },

            buildTreeSelectData(data){
                let result = [];
                for(let item of data){

                    let node = {
                        title:item.department.departmentName,
                        value:item.department.departmentId
                    };

                    if(item.children && item.children.length > 0){
                        node.children = this.buildTreeSelectData(item.children);
                    }
                    result.push(node);
                }

                return result;
            },

            verfity() {

                if (this.form.departmentName === '') {
                    message.error('请输入部门名称');
                    return false;
                }

                if (this.hasPid) {

                    if (this.form.departmentPid === '') {
                        message.error('请选择上级部门');
                        return false;
                    }
                }else{
                    this.form.departmentPid = '';
                }

                return true;

            },

            submitData() {

                if (this.verfity()) {

                    this.$axios.post("/auth/department/addDepartment", this.form)
                        .then(d => {

                            let result = d.data;

                            if (result.status == 0) {
                                message.success('添加成功');
                                this.$emit("ok");

                            } else {
                                message.error(result.message);
                            }
                        })
                        .catch(e => {
                            message.error('添加失败,未知错误');
                        })

                }


            }
        }
    }
</script>

<style scoped>

    .departmentAddRoot {

    }


</style>